<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>蓝莓派</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <!-- 导航开始 -->
    <div class="daohang">
        <div class="title">
            <div class="logo">
                <a class="shouye" href="index.html">
                    <img src="indexImg/logo_03.png" alt="">

                    <div class="logo-box">
                        <span>蓝莓派</span>
                        <h3>和音乐一起分享时光</h3>
                    </div>
                </a>
            </div>
            <div class="daohang-box">
                <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="乐章.html">乐章</a></li>
                        <li><a href="">听说</a>
                            <span>12</span></li>
                        <li><a href="#">乐趣</a></li>
                        <li><a href="#">聊聊</a></li>
                        <li><a href="#">游记</a></li>
                        <li><a href="#">摄影</a></li>
                        <li><a href="#">诚品</a></li>
                        <li><a href="#">蓝莓酱</a></li>
                        <li><a href="#">社区</a></li>
                        <div></div>
    

                </ul>
            </div>
            <div class="daohang-denglu">
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
            <div class="daohang-sousuo">
                <form action="">
                    <input type="text">
                    <button class="iconfont">&#xe610;</button>
                </form>
            </div>
        </div>

    </div>



    <!-- 导航结束 -->
    <!-- 轮播开始 -->
    <div class="lunbo">

        <div class="swiper-container" id="lunbo1">
            <div class="swiper-wrapper"></div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <!-- 轮播结束 -->
    <!-- 乐章开始 -->
    <div class="yuezhang">
        <div class="title">
            <a href="" class="yuezhang1">
                <span class="yuezhang1-title">乐章</span>
                <div class="yuezhang1-box">
                    <span></span>
                    <span></span>
                </div>
                <span class="yuezhang-buttom">MOVEMENT</span>
            </a>
            <div class="yuezhang-box">
                <div class="swiper-container" id="lunbo2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul class="yuezhang-box1" id="yuezhang-box1">
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="yuezhang-box1" id="yuezhang-box2"></ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="yuezhang-box1" id="yuezhang-box3"></ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="yuezhang-box1" id="yuezhang-box4"></ul>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->


                </div>
            </div>


        </div>
    </div>

    <!-- 乐章结束 -->
    <!-- 听说开始 -->
    <div class="tingshuo">
        <div class="title">
            <a href="" class="yuezhang1">
                <span class="yuezhang1-title">听说</span>
                <div class="yuezhang1-box">
                    <span></span>
                    <span class="tingshuo-icon iconfont">&#xe644;</span>
                    <span></span>
                </div>
                <span class="yuezhang-buttom">LISTENING</span>
            </a>
            <div class="tingshuo-box">




            </div>
        </div>
    </div>



    <!-- 听说结束 -->
    <!-- 乐趣开始 -->
    <div class="yuezhang lequ">
        <div class="title">
            <a href="" class="yuezhang1">
                <span class="yuezhang1-title">乐趣</span>
                <div class="yuezhang1-box">
                    <span></span>
                    <span class="tingshuo-icon iconfont">&#xe604;</span>
                    <span></span>
                </div>
                <span class="yuezhang-buttom">INTERESTING</span>
            </a>
            <div class="yuezhang-box lequ-1">

                <div class="swiper-container lequ-box" id="lunbo3">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul class="yuezhang-box1" id="lequ-box1">
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="yuezhang-box1" id="lequ-box2"></ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="yuezhang-box1" id="lequ-box3"></ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="yuezhang-box1" id="lequ-box4"></ul>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->

                    <div class="swiper-pagination lequ-fenye"></div>
                </div>
            </div>


        </div>
    </div>

    <!-- 乐趣结束 -->
    <!-- 聊聊开始 -->
    <div class="liaoliao">
        <div class="title">
            <a href="" class="yuezhang1">
                <span class="yuezhang1-title">聊聊</span>
                <div class="yuezhang1-box">
                    <span></span>
                    <span class="tingshuo-icon iconfont">&#xe601;</span>
                    <span></span>
                </div>
                <span class="yuezhang-buttom">CHATING</span>
            </a>
            <div class="liaoliao-box">
                <div class="swiper-container" id="lunbo4">
                    <div class="swiper-wrapper">

                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
                <!-- 导航等组件可以放在container之外 -->
            </div>

        </div>
    </div>
    <!-- 聊聊结束 -->
    <!-- 游记开始 -->
    <div class="youji">
        <div class="title">
            <a href="" class="yuezhang1">
                <span class="yuezhang1-title">游记</span>
                <div class="yuezhang1-box">
                    <span></span>
                    <span class="tingshuo-icon iconfont">&#xe65f;</span>
                    <span></span>
                </div>
                <span class="yuezhang-buttom">TRAVELNOTE</span>
            </a>
            <div class="youji-box">
                <div class="swiper-container" id="lunbo5">
                    <div class="swiper-wrapper">

                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 游记结束 -->
    <!-- 其他开始 -->
    <div class="qita">
        <div class="title">
            <a href="" class="yuezhang1">
                <span class="yuezhang1-title">其他</span>
                <div class="yuezhang1-box">
                    <span></span>
                    <span class="tingshuo-icon iconfont">&#xe604;</span>
                    <span></span>
                </div>
                <span class="yuezhang-buttom">OTHER</span>
            </a>
            <div class="qita-box"></div>
        </div>
    </div>

    <!-- 其他结束 -->
    <!-- 公共底部开始 -->
    <div class="footer">
        <div class="title">
            <div class="footle-l">
                <p>友情链接</p>
                <p>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">乐乎</a>
                    <a href="#">数字尾巴</a>
                    <a href="#">豆瓣</a>
                    <a href="#">环球旅行</a>
                </p>
            </div>
            <div class="footle-r">
                <div class="footle-weibo">
                    <img src="http://localhost/%e6%96%87%e4%bb%b6%e8%b5%84%e6%96%99/blueberrypaiPc/image/footer-ewm1.jpg" alt="">
                    <p>微博二维码</p>
                </div>
                <div class="footle-weibo footle-weixin">
                    <img src="http://localhost/%e6%96%87%e4%bb%b6%e8%b5%84%e6%96%99/blueberrypaiPc/image/footer-ewm1.jpg" alt="">
                    <p>微信二维码</p>
                </div>
                <div class="footer-dizhi">
                    <p>电话:51336808</p>
                    <p>邮编:100062  传真:51337666</p>
                    <p>邮箱:info@newworldtours.cn</p>
                    <p>地址:北京市东城区广渠门内大街安化北里1号长保大厦13层</p>
                </div>
            </div>
        </div>
    </div>
    <div class="lianxiwo">
        <p class="lianxiwo-top">
            <a href="">关于我们</a>
            <a href="">联系我们</a>
            <a href="">加入我们</a>
            <a href="">团队成员</a>
            <a href="">商务合作</a>
        </p>
        <p class="copyright"><span>蓝莓派版权所有</span>  京ICP备12346335号</p>
    </div>


    <!-- 公共底部结束 -->
    




    <script src="js/swiper.min.js"></script>
    <script src="js/index.js"></script>


</body>

</html>